<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{% block title %}note{% endblock %}</title>
</head>
<style type="text/css">
	html{color:#000;font-family:Arial,Helvetica,sans-serif;font-size:14px;}
	body,div,label,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote,th,td{margin:0;padding:0;border:0;outline:0;}
	table{border-collapse:collapse;border-spacing:0;}
	input,textarea{margin:0;padding:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;outline:none;color:#333;}
	fieldset,img{border:0;}
	address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
	li{list-style:none;}
	caption,th{text-align:left;}
	h1,h2,h3,h4,h5,h6{font-size:100%;}
	q:before,q:after{content:'';}
	abbr,acronym{border:0;font-variant:normal;}
	input.labelbox{border:0;}
	a{text-decoration:none;}
	a.line{text-decoration:underline;}
	a:hover{text-decoration:underline;}
	strong,h1,h2,h3,h4,h5,h6{font-weight:normal;}
	sup{vertical-align:text-top;}
	sub{vertical-align:text-bottom;}
	input{line-height:1.2em;}
	#header{ position: fixed;top:0;width:100%;
	height:50px;background-color: #f7f7f7;border-bottom: 1px solid #ccc;line-height: 50px;font-size:36px;text-indent:20px;font-family:tahoma,verdana,arial,sans-serif;
	}
	#header a:link,#header a:visited{color:#333;text-decoration:none;}
	#header a:hover,#header a:active{color:#f60;text-decoration:none;}
	#header a{}
	#footer{position: fixed;bottom:0;width:100%;background-color: #f7f7f7;border-top:1px solid #ccc;height:30px;font-size:12px;line-height: 30px;text-align: center;}
	.wrapper{margin:60px 0 30px;}
	.wrapper .tags{float:left;width:170px;}
		.tags li{width:164px;height:30px;line-height: 30px;margin:2px;position: relative;background-color: #f7f7f7;
		border:1px solid #ccc;text-indent:5px;text-transform:uppercase;
		-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
	
		}
		.tags li:hover{background-color: white;}
		.tags li a{letter-spacing: 3px;font-weight: bold;}
		.tags li span{position: absolute;right:5px;color:gray;}
	.wrapper .noteList{margin-left:180px;padding-top:1px;margin-right: 10px;}
		.noteList li{border:1px solid #ccc;margin-top:1px;line-height: 30px;margin-bottom: 5px;
						-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
						padding:0px 10px;font-size: 12px;position: relative;height: 30px;
			}
		.noteList li:hover{background-color: #f7f7f7;}
		.noteList li h2,.noteList li p,.noteList li tag{float:left;}
		.noteList li h2{font-weight: bold;font-size:14px;}
		.noteList li p{color:gray;margin-left:20px;}
		.noteList li .tag{position: absolute;right: 80px;}
		.noteList .tag .t{font-size:10px;color:white;display: inline;padding:2px 3px;border:1px solid #f7f7f7;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
		.noteList li .date{position: absolute;right:5px;color:silver;font-size:10px;}
	.add{position:fixed;top:15px;right:10px;}
	.active{top:9px;right:4px;border:1px solid gray;padding:5px;width:300px;background-color: #f7f7f7;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;
			box-shadow:-2px 2px 4px #ccc;-webkit-box-shadow:-2px 2px 4px #ccc;-moz-box-shadow:-2px 2px 4px #ccc;	
	}
	.add .txt,.active .txt{line-height: 21px;padding:1px 2px 3px;width:294px;border:1px solid #ccc;
	border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
	.active textarea{
		-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
		margin-top:5px;width:294px;height:100px;border:1px solid #ccc;padding:2px;}
	.active .button{font-family:tahoma,verdana,arial,sans-serif; }
	.active .bl {margin-top: 5px;}
	.active .bl a{font-size:10px; margin-left:5px;}
	.color1{background-color:#70869c}
	.color2{background-color:#82a064}
	.color3{background-color:#dd83af}
	.color4{background-color:#b272b9}
	.color5{background-color:#cf8c1d}
	.color6{background-color:#53b8fc}
	.color7{background-color:#f51b1b}
	.color8{background-color:#f6930c}
	.color9{background-color:#9dd008}
	.color10{background-color:#ffb2cc}
</style>
<body>
<div id="header">
	<h1><a href="/" title="back"><span>My Notes</span></a></h1>
</div>
<div class="wrapper clearfix">
{% block content %}
content
{% endblock %}
{% block footer %}
</div>
<div class="add">
	<form id="aform" name="aform" action="/addnote/" method="post">{% csrf_token %}
		<input type="text" id="notetitle" name="notetitle" class="txt" value="Add new note..." />
		<div id="fdetail" style="display:none">
			<textarea id="notecontent" name="notecontent"></textarea>
			<div class="bl">
			<input type="submit" value="Add New" id="btnAdd" class="button" />
			<a href="javascript:void(0)" onclick="hidwin()">Cancel</a>
			<div>
		</div>
	</form>
</div>
<div id="footer">
	<p>power by Python & Django</p>
</div>

{% endblock %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" >
	$(function(){
		$("#notetitle").click(function(){
			$("#fdetail").show();
			$(this).parent().parent().addClass("active");
			if($(this).val()=="Add new note..."){
				$(this).val('');
			}
		});
		$("#notetitle").blur(function(){
			if($(this).val()==""){
				$(this).val("Add new note...");
			}
		});
	});
	function hidwin(){
		$("#fdetail").hide();
		$(".add").removeClass("active");
		
	}
</script>
</body>
</html>
